import { Container, Title, Info, Avater, UserName } from "./styled";
import { Input, message, Switch, Avatar, Dropdown, Space } from "antd";
import type { MenuProps } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import { usePresskeyborad } from "@/utils/usePress";
import { useEffect, useMemo, useRef, useState } from "react";
import { inject, observer } from "mobx-react";
import { storeType } from "@/store";
import { useNavigate } from "react-router-dom";

const Header = observer(({ store }: { store?: storeType }) => {
  const navigate = useNavigate();
  const [isFocus, setIsFocus] = useState(false);
  const { keys } = usePresskeyborad();
  const inputRef = useRef(null);
  const isCtrk = useMemo(
    () => keys.includes("Control") && keys.includes("k"),
    [keys]
  );

  useEffect(() => {
    const keyswords = (inputRef.current as any)?.input?.value;
    if (isFocus && keys[0] && keys[0] === "Enter") {
      if (keyswords) {
        navigate(`/search?keywords=${keyswords}`);
      } else {
        message.warning("请输入关键字搜索");
      }
    }
  }, [keys]);

  useEffect(() => {
    isCtrk &&
      (inputRef.current as any).focus({
        cursor: "start",
      });
  }, [isCtrk]);

  const onClick: MenuProps["onClick"] = ({ key }) => {
    switch (key) {
      case "1":
        navigate("/info");
        break;
      case "2":
        navigate("/letter");
        break;
      case "3":
        navigate("/login");
        break;
      default:
        break;
    }
  };
  // useEffect(() => {
  //   if (store?.switchExam) navigate("/home");
  // }, [store?.switchExam]);
  const items: MenuProps["items"] = [
    {
      label: "个人主页",
      key: "1",
    },
    {
      label: "私信",
      key: "2",
    },
    {
      label: "退出登录",
      key: "3",
    },
  ];

  return (
    <Container>
      <div style={{ display: "flex" }}>
        <Title onClick={() => navigate("/home")}>前端面试题</Title>
        {!store?.switchExam && (
          <div
            style={{
              display: "flex",
              alignItems: "center",
              marginLeft: "20px",
            }}
          >
            <SearchOutlined style={{ color: "#b1b0b0" }} />
            <Input
              placeholder="请输入关键词搜索题目..."
              bordered={false}
              ref={inputRef}
              onFocus={() => setIsFocus(true)}
              onBlur={() => setIsFocus(false)}
            />
            {!isFocus && (
              <div
                style={{
                  display: "flex",
                  color: "#b1b0b0",
                  padding: "3px",
                  fontSize: "13px",
                  border: "1px solid #c0bebe",
                  borderRadius: "6px",
                }}
              >
                {"ctr+k"}
              </div>
            )}
          </div>
        )}
      </div>
      <Info>
        <Switch
          checkedChildren="答题模式"
          unCheckedChildren="学习模式"
          checked={store?.switchExam}
          onChange={(val) => store?.setSwitchExam(val)}
        />
        <UserName>康康</UserName>
        <Dropdown menu={{ items, onClick }}>
          <a onClick={(e) => e.preventDefault()}>
            <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
          </a>
        </Dropdown>
      </Info>
    </Container>
  );
});

export default inject((store) => store)(Header);
